'use strict'

import HufuEcharts from './index.jsx'

const echarts = require('echarts')

const lgColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  {
    offset: 0,
    color: 'rgba(0,132,255,0.15)',
  },
  {
    offset: 1,
    color: 'rgba(0,132,255,0)',
  },
])

/**
 * 线型图表，继承至HufuEcharts
 */
export default class HufuEchartsLine extends HufuEcharts {
  constructor(props) {
    super(props)
    this.options = {
      tooltip: {
        trigger: 'axis', // 数据项图形触发
        axisPointer: {
          // 指示样式
          type: 'line',
          axis: 'auto',
          lineStyle: {
            type: 'dashed',
          },
        },
        padding: 6,
        textStyle: {
          // 提示框内容的样式
          fontSize: '14px',
        },
      },
      xAxis: {
        type: 'category',
        nameTextStyle: {
          color: '#787878',
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(0,0,0,0.65)',
          },
        },
        axisLine: { show: false },
        axisTick: { show: false },
      },
      yAxis: {
        type: 'value',
        nameTextStyle: {
          color: '#787878',
          padding: [0, 20, 0, 0],
        },
        minInterval: 1,
        axisLabel: {
          textStyle: { color: 'rgba(0,0,0,0.45)' },
        },
        splitLine: {
          lineStyle: { color: '#F0F0F0' },
        },
        axisLine: { show: false },
        axisTick: { show: false },
      },
      grid: {
        left: 0,
        top: 24,
        bottom: 0,
        right: 0,
        containLabel: true,
      },
      series: [
        {
          data: [],
          type: 'line',
          barWidth: '20',
          smooth: true,
          symbolSize: 8,
          showBackground: false,
          legendHoverLink: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)',
          },
          color: '#0084FF',
          areaStyle: {
            type: 'default',
            color: lgColor, // 面积渐变
          },
          lineStyle: {
            color: '#0084FF',
          },
        },
      ],
    }
  }
}
